import { ContainerDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Container);

## Grid strategy

Starting from 8.2.0, `Container` supports `strategy="grid"` prop which enables more
features.

Differences from the default `strategy="block"`:
- Uses `display: grid` instead of `display: block`
- Does not include default inline padding
- Does not set `max-width` on the root element (uses grid template columns instead)

Features supported by `strategy="grid"`:
- Everything that is supported by `strategy="block"`
- Children with `data-breakout` attribute take the entire width of the container's parent element
- Children with `data-container` inside `data-breakout` have the same width as the main grid column

Example of using breakout feature:

<Demo data={ContainerDemos.breakout} />

## Usage

`Container` centers content and limits its `max-width` to the value specified in `size` prop.
Note that the `size` prop does not make `max-width` responsive, for example,
when it set to `lg` it will always be `lg` regardless of screen size.

<Demo data={ContainerDemos.usage} />

## Fluid

Set `fluid` prop to make container fluid, it will take 100% of available width,
it is the same as setting `size="100%"`.

<Demo data={ContainerDemos.fluid} />

## Customize sizes

You can customize existing `Container` sizes and add new ones with [CSS variables](/styles/styles-api)
on [theme](/theming/theme-object):

<Demo data={ContainerDemos.sizes} />

## Responsive max-width

To make `Container` `max-width` responsive, use [Styles API](/styles/styles-api) to set
`classNames`. For example, you can add `responsive` size that will make `Container`
`max-width` different depending on screen size:

<Demo data={ContainerDemos.responsive} />
